<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户信息</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-button plain>
        <a v-if="isLoggedIn" @click="goToMain">{{ client.nickname }}</a>
        <a v-else @click="goToLogin">登录</a>
    </el-button>
    <span v-if="client.status === '封禁'" style="color: #ff4d4f; margin-left: 12px;">您已被封禁，无法进行充值，请联系管理员：xxxxx</span>
    <el-tabs type="border-card" :tab-position="tabPosition" style="height: 700px;" @tab-click="handleClick">

        <el-tab-pane label="基础信息">
            <h3 style="text-align: center;">客户基础信息</h3>
            <el-upload
                    class="avatar-uploader"
                    :http-request="handleHttpRequest"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                <img v-if="client.avatar" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-form label-position="left" label-width="100px" :model="client" class="demo-form">
                <el-form-item label="昵称">
                    <span v-if="!isEditing">{{ client.nickname }}</span>
                    <el-input v-else v-model="editableClient.nickname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <span v-if="!isEditing">{{ client.age }}</span>
                    <el-input-number v-else v-model="editableClient.age" controls-position="right" :min="1"
                                     :max="100"></el-input-number>
                </el-form-item>
                <el-form-item label="个性签名">
                    <span v-if="!isEditing">{{ client.signature }}</span>
                    <el-input v-else v-model="editableClient.signature"></el-input>
                </el-form-item>
                <el-form-item v-if="!isEditing">
                    <el-button type="primary" @click="startEditing">编辑</el-button>
                </el-form-item>
                <el-form-item v-else>
                    <el-button type="success" @click="submitEdit">提交</el-button>
                    <el-button @click="cancelEdit">取消</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        <el-tab-pane label="我的钱包">
            <h3 style="text-align: center;">钱包</h3>
            <div style="text-align: center; margin-top: 10px;">
                <div style="align-items: center; gap: 20px;">
                    <div>
                        <span v-if="!showBalance">钱包余额: ***</span>
                        <span v-else>钱包余额: {{ client.balance }} 元</span>
                        <el-button type="text" @click="toggleBalanceVisibility">查看</el-button>
                    </div>
                    <el-button type="primary" @click="goToRecharge">充值</el-button>
                </div>
            </div>
        </el-tab-pane>

        <el-tab-pane label="签到">
            <h3 style="text-align: center;">签到（连续7天以上奖励翻倍）</h3>
            <el-calendar v-model="calendarValue" style="width: 80%; height: 500px; margin: 0 auto; overflow: auto;">
                <template slot="dateCell" slot-scope="{date, data}">
                    <p>{{ data.day.split('-').slice(2).join('') }}</p>
                    <div v-if="isSigned(date)">
                        ✔️+{{ getBonusCoin(date) }}
                    </div>
                </template>
            </el-calendar>
            <div style="margin-top: 20px; display: flex; justify-content: center; gap: 30px; align-items: center;">
                <div style="text-align: center">
                    <div style="color: #909399; font-size: 14px">当前积分</div>
                    <div style="font-size: 24px; color: #67C23A">{{ client.coin || 0 }}</div>
                </div>
                <div style="text-align: center">
                    <div style="color: #909399; font-size: 14px">连续签到</div>
                    <div style="font-size: 24px; color: #409EFF">{{ continueDays }}天</div>
                </div>
                <div style="text-align: center">
                    <div style="color: #909399; font-size: 14px">累计签到</div>
                    <div style="font-size: 24px; color: #E6A23C">{{ totalDays }}天</div>
                </div>
                <el-button
                        type="primary"
                        @click="submitSign"
                        :disabled="isSigned(new Date())">
                    {{ isSigned(new Date()) ? '今日已签到' : '立即签到' }}
                </el-button>
            </div>
        </el-tab-pane>

        <el-tab-pane label="收藏的店铺" @tab-click="fetchFavour">
            <h3 style="text-align: center;">收藏的店铺</h3>
            <el-table :data="shops" style="margin-top: 20px;" border max-height="500">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left">
                            <el-form-item label="店铺名称：">
                                <span>{{ props.row.tradeName }}</span>
                            </el-form-item>
                            <el-form-item label="店铺地址：">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式：">
                                <span>{{ props.row.contact }}</span>
                            </el-form-item>
                            <el-form-item label="关键词：">
                                <span>{{ props.row.keyword }}</span>
                            </el-form-item>
                            <el-form-item label="销量：">
                                <span>{{ props.row.totalSales }}</span>
                            </el-form-item>
                            <el-form-item label="发布时间：">
                                <span>{{ props.row.date }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="tradeName" label="店名"></el-table-column>
                <el-table-column prop="keyword" label="关键词"></el-table-column>
                <el-table-column prop="totalSales" label="销量" sortable></el-table-column>
                <el-table-column prop="date" label="发布时间" sortable></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showRoomDetails(scope.row)">查看</el-button>
                        <el-button size="mini" @click="cancelFavour(scope.row)">取消收藏</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="黑名单" @tab-click="fetchBlacklist">
            <h3 style="text-align: center;">黑名单</h3>
            <el-button type="primary" @click="toggleManagement">管理</el-button>
            <el-table :data="blacklist" style="margin-top: 20px;" border v-if="!isManaging">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="tradeName" label="商户名"></el-table-column>
            </el-table>
            <div v-if="isManaging">
                <el-table ref="blacklistTable" :data="blacklist" style="margin-top: 20px;" border>
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="tradeName" label="商户名"></el-table-column>
                </el-table>
                <el-button type="danger" @click="deleteBlacklist">删除黑名单</el-button>
                <el-button @click="toggleManagement">取消</el-button>
            </div>
        </el-tab-pane>

        <el-tab-pane label="浏览记录" @tab-click="fetchBrowse">
            <h3 style="text-align: center;">历史浏览</h3>
            <el-button type="primary" @click="clearBrowse">清空</el-button>
            <el-table :data="browseRecord" style="margin-top: 20px;" border max-height="500">
                <el-table-column prop="tradeName" label="店名"></el-table-column>
                <el-table-column prop="time" label="浏览时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="deleteBrowse(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="安全设置">
            <h3 style="text-align: center;">安全设置</h3>
            <el-form label-position="left" label-width="100px" class="demo-form">
                <el-form-item label="真实姓名">
                    {{ realNameMask(client.realName) || '未认证' }}
                </el-form-item>
                <el-form-item label="身份证号">
                    {{ idNumMask(client.idNum) || '未绑定' }}
                </el-form-item>
                <el-form-item label="绑定手机">
                    {{ phoneMask(user.phoneNum) || '未绑定' }}
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="goToChangePassword">
                        修改密码
                    </el-button>
                    <el-button v-if="!client.realName" type="primary" @click="showRealNameDialog">
                        实名认证
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

    </el-tabs>

    <el-dialog title="房型信息" :visible.sync="dialogVisible">
        <el-table :data="selectedRoomDetails" border>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left">
                        <el-form-item label="关键词：">
                            <span>{{ props.row.keyword }}</span>
                        </el-form-item>
                        <el-form-item label="床型：">
                            <span>{{ props.row.bedType }}</span>
                        </el-form-item>
                        <el-form-item label="设施：">
                            <span>{{ props.row.facility }}</span>
                        </el-form-item>
                        <el-form-item label="面积：">
                            <span>{{ props.row.area }}</span>
                        </el-form-item>
                        <el-form-item label="人数：">
                            <span>{{ props.row.capacity }}</span>
                        </el-form-item>
                        <el-form-item label="价格：">
                            <span>{{ props.row.price }}</span>
                        </el-form-item>
                        <el-form-item label="销量：">
                            <span>{{ props.row.salesVolume }}</span>
                        </el-form-item>
                        <el-form-item label="剩余数量：">
                            <span>{{ props.row.surplus }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="keyword" label="关键词"></el-table-column>
            <el-table-column prop="capacity" label="人数" sortable></el-table-column>
            <el-table-column prop="price" label="价格" sortable></el-table-column>
            <el-table-column prop="surplus" label="剩余数量" sortable></el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog title="实名认证" :visible.sync="realNameDialogVisible">
        <el-form label-position="left" label-width="100px">
            <el-form-item label="真实姓名">
                <el-input v-model="editableClient.realName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="editableClient.idNum"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="realNameDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitRealName">提交</el-button>
        </div>
    </el-dialog>

    <el-dialog title="充值" :visible.sync="rechargeDialogVisible">
        <el-form label-position="left" label-width="100px">
            <el-form-item label="充值金额">
                <el-input-number v-model="rechargeAmount" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="rechargeDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitRecharge">提交</el-button>
        </div>
    </el-dialog>
</div>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .el-calendar-day {
        height: 75px !important;
        padding: 8px !important;
        font-size: 13px !important;
    }

    .el-calendar__header {
        padding: 11px !important;
    }

    .el-calendar-table__row {
        height: 60px !important;
    }

    .el-calendar-table td {
        vertical-align: top;
        text-align: center;
    }
</style>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tabPosition: 'left',
                isLoggedIn: false,
                isEditing: false,
                showBalance: false,
                user: {
                    id: '',
                    phoneNum: '',
                    password: '',
                    userType: '',
                },
                client: {
                    id: '',
                    userId: '',
                    nickname: '',
                    age: '',
                    signature: '',
                    realName: '',
                    idNum: '',
                    balance: 0,
                    coin: 0,
                    avatar: '',
                    status: '正常'
                },
                editableClient: {},
                shops: [],
                dialogVisible: false,
                selectedRoomDetails: [],
                roomCache: new Map(),
                blacklist: [],
                browseRecord: [],
                isManaging: false,
                realNameDialogVisible: false,
                rechargeAmount: '',
                rechargeDialogVisible: false,
                signedData: [],
                continueDays: 0,
                totalDays: 0,
                imageUrl: '',
            }
        },
        mounted() {
            this.checkLoginStatus();
        },
        methods: {
            beforeAvatarUpload(file) {
                const isImage = file.type.startsWith('image/');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isImage) {
                    this.$message.error('只能上传图片文件');
                } else if (!isLt2M) {
                    this.$message.error('图片大小不能超过2MB');
                }
                return isImage && isLt2M;
            },
            // 自定义上传请求
            handleHttpRequest(options) {
                const _this = this;
                const formData = new FormData();
                formData.append('file', options.file);
                formData.append('clientId', this.client.id);

                axios.post('http://localhost:8080/ProjectRound1_war/client/uploadAvatar', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    if (response.data.code === 200) {
                        _this.imageUrl = response.data.data;
                        _this.checkLoginStatus();
                        _this.$message.success("头像上传成功");
                        options.onSuccess(response.data.msg);
                    } else if (response.data.code === 20007) {
                        console.log(response.data.msg);
                    } else {
                        _this.$message.error(response.data.msg);
                        options.onError(response.data.msg);
                    }
                }).catch(error => {
                    console.error(error);
                    _this.$message.error('上传请求失败');
                    options.onError(error);
                });
            },
            submitSign() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/signIn', _this.client.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.fetchSignedDates();
                            _this.checkLoginStatus();
                            _this.$message.success('签到成功！');
                        } else {
                            _this.$message.error(response.data.msg);
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },
            getBonusCoin(date) {
                const formatDate = date.toISOString().split('T')[0];
                const signedItem = this.signedData.find(item => item.date === formatDate);
                return signedItem ? signedItem.bonusCoin : 0;
            },
            isSigned(date) {
                const formatDate = date.toISOString().split('T')[0];
                // 修改为检查signedData数组
                return this.signedData.some(item => item.date === formatDate);
            },
            fetchSignedDates() {
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/querySignIn', _this.client.id)
                    .then(response => {
                        _this.signedData = response.data.data.record;
                        _this.continueDays = response.data.data.continuousDays;
                        _this.totalDays = response.data.data.totalDays;
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            checkLoginStatus() {
                const _this = this;
                axios.get('http://localhost:8080/ProjectRound1_war/user/checkLogin').then(response => {
                    if (response.data.code === 200 && response.data.data.user.userType === "client") {
                        _this.isLoggedIn = true;
                        _this.user = response.data.data.user;
                        _this.client = response.data.data.additionalInfo;
                        _this.imageUrl = `/ProjectRound1_war/img/avatar/${_this.client.avatar}`;
                        _this.editableClient = {...response.data.data.additionalInfo};
                    } else {
                        _this.isLoggedIn = false;
                    }
                });
            },
            handleClick(tab) {
                if (tab.label === "收藏的店铺") {
                    this.fetchFavour();
                } else if (tab.label === "黑名单") {
                    this.fetchBlacklist();
                } else if (tab.label === "签到") {
                    this.fetchSignedDates();
                } else if (tab.label === "浏览记录") {
                    this.fetchBrowse();
                }
            },
            goToLogin() {
                window.location.href = 'login.html';
            },
            goToMain() {
                window.location.href = 'client.html';
            },
            startEditing() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                this.isEditing = true;
            },
            submitEdit() {
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/update', {
                    id: _this.client.id,
                    userId: _this.user.id,
                    nickname: _this.editableClient.nickname,
                    age: _this.editableClient.age,
                    signature: _this.editableClient.signature,
                }).then(response => {
                    if (response.data.code === 200) {
                        _this.client = {..._this.editableClient};
                        _this.isEditing = false;
                        _this.$message.success('修改成功！');
                    } else {
                        _this.$message.error(response.data.msg);
                    }
                }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },
            cancelEdit() {
                this.editableClient = {...this.client};
                this.isEditing = false;
            },
            toggleBalanceVisibility() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                this.showBalance = !this.showBalance;
            },
            fetchFavour() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/fetchFavour', _this.client.id)
                    .then(response => {
                        _this.shops = response.data.data;
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },
            fetchRoomDetails(shop) {
                const shopId = shop.id;
                if (this.roomCache.has(shopId)) {
                    return Promise.resolve();
                }
                const _this = this;
                return axios.post('http://localhost:8080/ProjectRound1_war/merchant/queryRoom', shopId)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.roomCache.set(shopId, response.data.data);
                        } else {
                            console.error(response.data.msg);
                        }
                    });
            },

            showRoomDetails(shop) {
                this.fetchRoomDetails(shop)
                    .then(() => {
                        this.selectedRoomDetails = this.roomCache.get(shop.id);
                        this.dialogVisible = true;
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        this.$message.error('获取房型信息失败');
                    });
            },

            cancelFavour(shop) {
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/cancelFavour', {
                    clientId: _this.client.id,
                    merchantId: shop.id,
                })
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('取消收藏成功');
                            // 更新收藏列表
                            _this.shops = _this.shops.filter(item => item.id !== shop.id);
                        } else {
                            _this.$message.error('取消收藏失败');
                            console.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        _this.$message.error('请求失败');
                    });
            },
            fetchBlacklist() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/fetchBlackList', _this.client.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.blacklist = response.data.data;
                        } else {
                            console.error(response.data.msg);
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },
            fetchBrowse() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/browse/fetchBrowse', _this.client.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.browseRecord = response.data.data;
                        } else {
                            console.error(response.data.msg);
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            deleteBrowse(browse) {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/browse/deleteBrowse', {
                    clientId: browse.clientId,
                    merchantId: browse.merchantId,
                })
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('删除成功');
                            _this.fetchBrowse();
                        } else {
                            console.error(response.data.msg);
                            _this.$message.error('删除失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            clearBrowse() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                if (!confirm('确定要清空浏览记录吗？')) {
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/browse/clearBrowse', _this.client.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('清空成功');
                            _this.fetchBrowse();
                        } else {
                            console.error(response.data.msg);
                            _this.$message.error('清空失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },
            toggleManagement() {
                this.isManaging = !this.isManaging;
            },
            deleteBlacklist() {
                const _this = this;
                const selectedRows = this.$refs.blacklistTable.selection;
                if (selectedRows.length === 0) {
                    _this.$message.warning('请选择要删除的黑名单');
                    return;
                }
                const merchantIds = selectedRows.map(row => row.id);
                axios.post('http://localhost:8080/ProjectRound1_war/client/cancelBlack', {
                    clientId: _this.client.id,
                    merchantIds: merchantIds,
                })
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('删除黑名单成功');
                            _this.fetchBlacklist();
                            _this.isManaging = false;
                        } else {
                            _this.$message.error('删除黑名单失败');
                            console.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        _this.$message.error('请求失败');
                    });
            },
            // 身份证号脱敏
            idNumMask(idNum) {
                if (!idNum) return '未绑定';
                return idNum.replace(/(\d{4})\d+(\d{2})/, '$1********$2');
            },

            // 手机号脱敏
            phoneMask(phone) {
                if (!phone) return '未绑定';
                return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
            },

            realNameMask(realName) {
                if (!realName) return '未认证';
                return realName;
            },

            goToChangePassword() {
                window.location.href = 'forget_password.html';
            },

            showRealNameDialog() {
                this.realNameDialogVisible = true;
            },

            submitRealName() {
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/realName', {
                    id: _this.client.id,
                    realName: _this.editableClient.realName,
                    idNum: _this.editableClient.idNum,
                }).then(response => {
                    if (response.data.code === 200) {
                        _this.client.realName = _this.editableClient.realName;
                        _this.client.idNum = _this.editableClient.idNum;
                        _this.realNameDialogVisible = false;
                        _this.$message.success('实名认证成功');
                    } else if (response.data.code === 20001) {
                        _this.$message.error(response.data.msg);
                    } else {
                        _this.$message.error('实名认证失败');
                        console.error(response.data.msg);
                    }
                }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            goToRecharge() {
                if (!this.isLoggedIn) {
                    window.location.href = 'login.html';
                    return;
                }
                this.rechargeDialogVisible = true;
            },
            submitRecharge() {
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/client/recharge', {
                    clientId: _this.client.id,
                    amount: _this.rechargeAmount,
                })
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.rechargeDialogVisible = false;
                            _this.rechargeAmount = '';
                            _this.$message.success('充值信息已申请，等待管理员审核，请勿重复提交');
                        } else if (response.data.code === 20002) {
                            _this.$message.error(response.data.msg);
                        } else {
                            _this.$message.error('充值失败');
                            console.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        _this.$message.error('请求失败');
                    });
            },
        }
    })
</script>
</body>
</html>